<template>
	<view>
		<view class="userinfo" v-if="!isLogin" @click="toLogin">
			<image src="https://robohash.org/1231231" mode=""></image>
			<text>未登录， 请登录</text>
		</view>
		
		<view class="userinfo" v-else>
			<image :src="userInfo.avator" mode=""></image>
			<text>{{userInfo.nickname}}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	const isLogin = ref(false);
	const userInfo = ref({})
	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	
	onShow(() => {
		const user = uni.getStorageSync('userInfo');
		if(user) {
			isLogin.value = true
			userInfo.value = user
		} else {
			isLogin.value = false
		}
	})
</script>

<style lang="scss">
.userinfo {
	height: 400rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}
	
	text {
		font-size: 50rpx;
		font-weight: bold;
	}
}
</style>
